import React, { useState } from 'react';
import { DownOutlined, UpOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { Form, Input, Select, Button, message } from 'antd';
import FoldSearchPanle from '@/components/FoldSearchPanle';
export interface SelectProps{
    defaultParams : {},
    onSearch:(values: any) => void,
    children: any,
    hideSearchForm:any
}
const SearchForm: React.FC<SelectProps> = (props: SelectProps) => {
    const [fold, setFold] = useState(true);
    const [form] = Form.useForm();
    const search = (values: any) => {
        if (typeof props.onSearch === 'function') {
            props.onSearch(values);
        }
    };
    const handleReset = () => {
        form.resetFields();
        message.success('重置完成');
    };
    const layoutCol ={ xl: 4, lg: 6, md: 12, sm: 24 }

    return (
        <Form form={form} initialValues={props.defaultParams} onFinish={search}>
            <FoldSearchPanle fold={fold} lastSpan={8} layoutCol={layoutCol}>
            <Form.Item name="productId" label="产品编码">
                <Input placeholder="请输入产品编码" />
            </Form.Item>
            <Form.Item name="supplier" label="供应商">
                <Input placeholder="请输入供应商" />
            </Form.Item>
            <Form.Item name="startDate" label="开始时间">
                <Input placeholder="请输入联系电话" />
            </Form.Item>
            <Form.Item name="endDate" label="结束时间">
                <Input placeholder="请选择结束时间" />
            </Form.Item>
                {!props.hideSearchForm && (
                    <Form.Item name="outPrice" label="外购报价">
                <Input placeholder="请选择外购报价" />
            </Form.Item>
            )}
                {props.hideSearchForm && (
                    
            <Form.Item name="productPrice" label="工序报价">
                <Input placeholder="请选择工序报价" />
            </Form.Item>
            )}
            <Form.Item>
                <span style={{ float: 'right' }}>
                    <Button
                        type="link"
                        icon={fold ? <DownOutlined /> : <UpOutlined />}
                        onClick={() => setFold(!fold)}
                    >
                        {fold ? '更多' : '收起'}
                    </Button>
                    <Button.Group style={{ margin: '0 12px' }}>
                        <Button
                            type="primary"
                            icon={<SearchOutlined />}
                            htmlType="submit"
                            title="查询"
                            style={{ zIndex: 3 }}
                        >
                            查询
                        </Button>
                        <Button icon={<ReloadOutlined />} onClick={handleReset} title="重置">
                            重置
                        </Button>
                    </Button.Group>
                    {props.children}
                </span>
            </Form.Item>
          </FoldSearchPanle>
    </Form>
  );
};

export default SearchForm;
